<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务管理 - 业务列表</title>
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .stats-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-top: 15px;
        }

        .stat-item {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            text-align: center;
        }

        .stat-label {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 5px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #2d3436;
        }
    </style>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/api.js"></script>
    <script type="module" src="../js/components/navigation.js"></script>
</head>
<body>
<div class="app-container">
    <header class="app-header">
        <div class="logo">员工管理系统</div>
        <div class="user-info">
            <span id="username-display"></span>
            <button id="logout-btn" class="btn btn-secondary">退出登录</button>
        </div>
    </header>

    <div class="app-body">
        <aside class="sidebar">
            <nav class="menu">
                <ul>
                    <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">员工管理</a>
                        <ul class="submenu">
                            <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                            <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">业务管理</a>
                        <ul class="submenu">
                            <li><a href="list.html" class="submenu-item">业务列表</a></li>
                            <li><a href="create.html" class="submenu-item">创建业务</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">薪酬管理</a>
                        <ul class="submenu">
                            <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                            <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-group">
                        <a href="#" class="menu-item">系统设置</a>
                        <ul class="submenu">
                            <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                            <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

        <main class="content">
            <!-- 统计报表模块 -->
            <div class="stats-card">
                <div class="card-header">
                    <h2 class="card-title">业务统计报表</h2>
                </div>
                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-label">总业务数</div>
                        <div class="stat-value" id="total-businesses"></div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">总收入</div>
                        <div class="stat-value" id="total-revenue"></div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">已完成业务</div>
                        <div class="stat-value" id="completed-businesses"></div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-label">进行中业务</div>
                        <div class="stat-value" id="active-businesses"></div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">业务列表</h2>
                    <a href="create.html" class="btn btn-primary">创建业务</a>
                </div>
                <div class="search-container">
                    <input type="text" id="search-input" class="search-input" placeholder="请输入业务名称">
                    <button id="search-btn" class="search-btn">搜索</button>
                </div>
                <div class="table-container">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>业务名称</th>
                            <th>开始日期</th>
                            <th>结束日期</th>
                            <th>状态</th>
                            <th>收入</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="business-table-body">
                        </tbody>
                        <tfoot></tfoot>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    $(document).ready(function () {
        show(1,"");
        $("[id=search-btn]").click(function () {
            let bName=$("[id=search-input]").val();
            show(1,bName);
        });
        $(document).on("click", "tfoot input[type='button']", function() {
            let pageindex;
            if ($(this).attr("alt") == "确定") {
                let totalPages = $("tfoot i").attr("alt");
                let inputPage = $("#pageindex").val();
                if (inputPage >= 1 && inputPage <= totalPages) {
                    pageindex = inputPage;
                } else {
                    pageindex = 1;
                    alert("页码超出范围");
                }
            } else {
                pageindex = $(this).attr("alt");
            }

            let bName = $("#search-input").val();
            show(pageindex,bName);
        });
        $(document).on("click",".delete-btn",function () {
            let bId = $(this).data('id');
            $.get("../businessControl/delete", {"bId": bId}, function(b) {
                if(b) {
                    alert("删除成功!");
                    show(1,"");
                }else {
                    alert("删除失败")
                }
            });
        });
        $(document).on("click",".edit-btn",function () {
            let bId = $(this).data('id');
            window.location.href="update.html?bId="+bId;
        });
    });

    function show(indexPage, bName) {
        $.get("../businessControl/businessList", {"indexPage": indexPage, "bName": bName},
            function (list) {
                JSON.stringify(list);
                $('#business-table-body').empty();
                if (list.listIndex.length != 0) {
                    for (let i = 0; i < list.listIndex.length; i++) {
                        let business = list.listIndex[i];
                        $("<tr>\n" +
                            "<td>"+business.bId+"</td>\n" +
                            "<td>"+business.bName+"</td>\n" +
                            "<td>"+business.startDate+"</td>\n" +
                            "<td>"+business.endDate+"</td>\n" +
                            "<td>"+business.status+"</td>\n" +
                            "<td>"+business.money+"</td>\n" +
                            "<td>" +
                            "<button class='btn btn-primary edit-btn' data-id='" + business.bId + "'>编辑</button>" +
                            "<button class='btn btn-danger delete-btn' data-id='" + business.bId + "'>删除</button>" +
                            "</td>\n" +
                            "</tr>").appendTo('#business-table-body')
                    }
                } else {
                    $("暂无数据").appendTo('#business-table-body');
                }
                $("#total-businesses").empty();
        $(list.dateCount).appendTo("#total-businesses");
        $("tfoot").empty();
        if (list.pageIndex != 1) {
            $("<input style='width: 60px;height: 30px;margin-right: 20px;background: #3a56d4;color: white;border: none' type='button' value='上一页' alt='" + (list.pageIndex - 1) + "'/>").appendTo("tfoot");
        }
        for (var i = 1; i <= list.pageCount; i++) {
            $("<input style='width: 30px;height: 30px;margin-right: 20px;background: #ced4da;color: white;border: none' type='button' value='" + i + "' alt='" + i + "'/>").appendTo("tfoot");
        }
        if (list.pageIndex != list.pageCount) {
            $("<input style='width: 60px;height: 30px;margin-right: 20px;background: #3a56d4;color: white;border: none' type='button' value='下一页' alt='" + (list.pageIndex + 1) + "'/>").appendTo("tfoot");
        }
        $("<i alt='" + list.pageCount + "'>共" + list.pageCount + "页</i>").appendTo("tfoot");
        $("到第<input type='text' id='pageindex'/> 页</i>").appendTo("tfoot");
        $("<input style='width: 40px;height: 30px;margin-right: 20px;background: #ced4da;color: white;border: none' type='button' value='确定' alt='确定'/>").appendTo("tfoot");
    });
        $.get("../businessControl/allBusinesses",function (allList) {
            JSON.stringify(allList);
            $("#total-revenue").empty();
            $("#completed-businesses").empty();
            $("#active-businesses").empty();
            let countMoney=0;
            let done=0;
            let undone=0;
            if (allList.length!= 0){
                for (let i = 0; i < allList.length; i++) {
                    let money=allList[i].money;
                    countMoney=countMoney+money;
                    if("已完成"==allList[i].status){
                        done++;
                    }
                    if("进行中"==allList[i].status){
                        undone++;
                    }
                }
            }
            $(countMoney).appendTo("#total-revenue");
            $(done).appendTo("#completed-businesses");
            $(undone).appendTo("#active-businesses");
        })
    }
</script>
</body>
</html>